（0）@charset （规定页面使用什么格式）
这个是标识 css 解析是按照什么字符格式解析。一般出现在css文件的最顶部。这个规则只在给出语法解析阶段前使用，并不影响页面上的展示效果
（1）@import（用来引入文件）
这个是用来引入另外一个 css 文件到当前文件内。除了页面的 @charset 标识，其余的都会引入，就相当于复制
1
2
3
4
5
6
7
8
|
@import "/css/base.css"
@import url("/css/base.css")
@import [ <url> | <string> ]
[ supports( [ <supports-condition> | <declaration> ] ) ]?
<media-query-list>? ;
|
它能够对设备的类型进行一些判断。在 media 的区块内。是普通规则列表。
1
2
3
4
5
6
7
8
9
10
| @media print{
header{
font-size:13pt;
}
}
@media screen{
html{
font-size:50px;
}
}
|
（3）@page（分页媒体访问网页时的表现设置）
page 用于分页媒体访问网页时的表现设置，页面是一种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒。
1
2
3
4
5
6
7
8
9
10
| @page {
size: 8.5in 11in;
margin: 10%;
@top-left {
content: "Hamlet";
}
@top-right {
content: "Page " counter(page);
}
}
|
（4）@counter-style（定义列表样式）
1
2
3
4
5
6
7
8
9
10
11
12
|
@counter-style count-style{
system:cyclic/numeric/alphabetic/symbolic/additive/[fixed ?]/[ extends ]; /*这个定义算法*/
range:auto/数字范围 ; /*使用范围*/;
symbols：符号; or additive-symbols: 符号;
prefix：前缀;
suffix: 后缀;
pad: 补零策略;
negative：负数策略;
fallback: 出错后的默认值;
speakas: 语音策略;
}
|
具体的可以看 CSDN参数属性，或者可以看 MDN详解
（5）@keyframes（定义关键帧动画）
这个可能是比较熟悉了，定义关键帧动画。著名的 animate.css，就是使用这个定义的多达几十种动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
@keyframes animateName {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
.userAnimate{
animation:animateName .5s ease-in infinite;
}
|
（6）@fontface（定义字体）
著名的 icon字体图标，就是使用这个定义的。
1
2
3
4
5
6
7
| @font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.woff);
}
p {
font-family: Gentium, serif;
}
|
（7）@supports（判断环境）
support 检查环境的特性，它与 media 比较类似
（8）@namespace（设置命名空间）
用于跟 XML 命名空间配合的一个规则，表示内部的 CSS 选择器全都带上特定命名空间。
*****这个还没搞懂用法，暂时先记下
/a>
（9）@viewport（设置视口特性）
用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被 html 的 meta 代替。
大概的就是这些了。有其他的话，之后再做补充吧。
评论加载中